<template>
  <!-- <a-drawer
    title="任务研究"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s task-research-box-drawer"
    :closable="true"
    :mask="false"
    :visible="taskResearchVisible"
    @close="onClose"
  > -->

  <div class="task-research-box">
    <!-- search -->
    <a-form-model ref="task-research-box" layout="inline" :model="search" class="comm-search" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <!-- 筛选条件与查询 -->
      <a-form-model-item label="">
        <airModel v-model="search.model" />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-select
          v-model="search.fleet"
          show-arrow
          style="minWidth: 100%"
          placeholder="机队"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in ftmFleetList" :key="selectItem.id" :value="selectItem.name">
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="">
        <tailNumber :key="Math.random()" v-model="search.tailNumber" value-key="tailnumber" name-key="tailnumber" mode="default" />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-input
          v-model="search.flightNo"
          style="minWidth: 100%"
          placeholder="航班号"
        />
      </a-form-model-item>

      <a-form-model-item label="">
        <ataList v-model="search.ata" mode="default" />
      </a-form-model-item>

      <a-form-model-item label="">
        <a-select
          v-model="search.legCount"
          show-arrow
          style="minWidth: 100%"
          placeholder="航段范围"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="item in legCountList" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="">
        <a-select
          v-model="search.activity"
          show-arrow
          style="minWidth: 100%"
          placeholder="状态"
          allow-clear
          mode="multiple"
          :max-tag-count="1"
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="item in activeListF" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="" class="tr-ec-box">
        <eventCodeList v-model="search.code" value-key="value" name-key="value" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-select
          v-model="search.priority"
          show-arrow
          style="minWidth: 100%"
          placeholder="警告"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="item in priorityList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item class="of-fb-11">
        <a-button type="primary" ghost @click="resetSearchHandler">
          重置
        </a-button>
        <a-button type="primary" class="ml-8" :loading="eventItemProcessingLoading" @click="getData">
          查询
        </a-button>
        <a-button type="link" class="ml-8" @click="goBackFm">
          返回
        </a-button>
      </a-form-model-item>
    </a-form-model>

    <!-- table -->
    <a-spin :spinning="eventItemProcessingLoading">
      <vxe-grid
        ref="xTable1"
        class="event-trigger-packet-upload"
        show-overflow
        stripe
        highlight-hover-row
        :columns="eventItemProcessingColumns"
        :data="eventItemProcessingList"
        height="712"
        :sort-config="{trigger: 'cell'}"
      />
    </a-spin>
  </div>

  <!-- </a-drawer> -->
</template>

<script>
import rowClass from '@/pages/common/rowClass';
import { mapState, mapActions, mapGetters } from 'vuex';
import { activeList, priorityList } from '@/pages/common/constant.js';
import tailNumber from '@/pages/components/tailNumber';
import eventCodeList from '@/pages/components/eventCodeList';
import ataList from '@/pages/components/ataList';
import airModel from '@/pages/components/airModel';
export default {
  components: {
    eventCodeList,
    tailNumber,
    ataList,
    airModel
  },
  mixins: [rowClass],
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    taskResearchVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentRow: {},
      search: {},
      priorityList,
      legCountList: Object.freeze([5, 10, 20, 50, 100]),
      eventItemProcessingColumns: Object.freeze([
        {
          title: '机号',
          dataIndex: 'tailnumber',
          width: 100,
          slots: {
            default: ({ row }) => {
              return row.tailnumber || '--';
            }
          }
        },
        {
          title: '航班',
          dataIndex: 'flightNo',
          width: 100,
          slots: {
            default: ({ row }) => {
              return row.flightNo ?? '--';
            }
          }
        },
        {
          title: '优先级',
          dataIndex: 'priority',
          className: 'show-over-flow-bo',
          width: 80,
          slots: {
            default: ({ row }) => {
              return [<noticePriorityIcon priority={row.priority} msgType={row.name} />];
            }
          }

        },
        {
          title: 'ATA',
          dataIndex: 'ata',
          width: 140,
          slots: {
            default: ({ row }) => {
              return row.ata || '--';
            }
          }
        },
        {
          title: '事件类型',
          dataIndex: 'name',
          width: 80,
          slots: {
            default: ({ row }) => {
              return row.name || '--';
            }
          }
        },
        {
          title: '编码',
          dataIndex: 'code',
          width: 100,
          slots: {
            default: ({ row }) => {
              return row.code || '--';
            }
          }
        },
        {
          title: '名称',
          dataIndex: 'description',
          slots: {
            default: ({ row }) => {
              return row.description || '--';
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'activity',
          width: 100,
          slots: {
            default: ({ row }) => {
              return [<span>{row.activity ? activeList.find(item => item.value === row.activity).name : '--'}</span>];
            }
          }

        },
        {
          title: '时间',
          dataIndex: 'msgTime',
          width: 168,
          slots: {
            default: ({ row }) => {
              return row.msgTime ? this.$moment.utc(row.msgTime).format('YYYY-MM-DD HH:mm:ss') : '--';
            }
          }
        }
      ])
    };
  },

  computed: {
    ...mapState('fraMonitoring', [
      'eventItemProcessingList',
      'eventItemProcessingLoading',
      'ftmFleetList'
    ]),
    ...mapGetters('setting', ['sideMenuWidth']),
    activeListF() {
      const arr = [...activeList];
      arr.splice(0, 1);
      return arr;
    }
  },
  beforeDestroy() {
    localStorage.removeItem('trRow');
  },
  mounted() {
    const uuid = this.$route?.query?.uuid ?? new Date().getTime();
    const lsRow = sessionStorage.getItem(`tr${uuid}`) ?? localStorage.getItem('trRow') ?? localStorage.getItem('row');
    if (this.$store.state.setting.openType === '_blank' && !sessionStorage.getItem(`tr${uuid}`)) {
      sessionStorage.setItem(`tr${uuid}`, lsRow);
    }

    this.currentRow = JSON.parse(lsRow) ?? {};

    this.$set(this.search, 'flightNo', this.currentRow.flightNo);
    this.$set(this.search, 'tailNumber', this.currentRow.tailnumber);
    this.search.flightNo = this.currentRow.flightNo;
    this.search.tailNumber = this.currentRow.tailnumber;
    this.getData();
  },
  // watch: {
  //   'currentRow'(nv) {
  //     if (this.taskResearchVisible) {

  //       this.getData();
  //     }
  //   }
  // },
  methods: {
    ...mapActions('fraMonitoring', [
      'getEventItemProcessing'
    ]),
    goBackFm() {
      this.$router.go(-1);
    },
    // 筛选弹框
    handleClickChange(visible) {
      if (visible) {
        this.checkedFilterTmp = [...this.checkedFilter];
      }
      this.checkedFilterShow = visible;
    },
    // 保存选择的筛选条件
    filterChangeSave() {
      this.checkedFilterShow = false;
      this.checkedFilter = [...this.checkedFilterTmp];
    },

    // 当drawer点击关闭
    onClose() {
      this.$emit('close', 'taskResearchVisible');
      this.resetSearchHandler();
    },
    resetSearchHandler() {
      this.search = {};
      this.$set(this.search, 'flightNo', this.currentRow.flightNo);
      this.$set(this.search, 'tailNumber', this.currentRow.tailnumber);
      this.getData();
    },
    // 获取数据
    getData() {
      const params = {
        ...this.search,
        ata: this.search.ata && this.search.ata.length === 0 ? undefined : this.search.ata,
        code: this.search.code && this.search.code.length === 0 ? undefined : this.search.code,
        activity: this.search.activity && this.search.activity.length === 0 ? undefined : this.search.activity,
        priority: this.search.priority && this.search.priority.length === 0 ? undefined : this.search.priority
      };
      this.getEventItemProcessing(params);
    }
  }
};
</script>

<style lang="less">
@import './index.less';
</style>

